<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="main4(购物车).css "/>
    <script type="text/javascript "  src="js/jquery.js"></script>
    <script type="text/javascript " src="js/main.js"></script>
    <script type="text/javascript " src="js/jquery-2.2.4 (1).js"></script>





</head>
<body>
<div id="all">
    <div class="top">
        <div class="container">
        <ul class="drop">
        <li class="drop-menu">
            <a class="jiamiao123" style="position:absolute;left:1000px;top:10px;"href="javascript:void(0)">jiamiao123 |</a>
            <ul class="drop-contenta">
                <li><a href="#">个人设置</a></li>
                <li><a href="#">账号绑定</a></li>
                <li><a href="#">退出</a></li>

            </ul>
        </li>
            <li  style="position:absolute;left:1090px;top:10px;" ><a href="javascript:void(0)">消息<a style="color:red;">3</a></a></li>

        <li class="drop-menu" >
            <a class="a" style="position:absolute;left:1160px;top:10px;" href="javascript:void(0)">我的收藏  |</a>
            <ul  class="drop-contentb">

                <li><a  href="#">收藏的商品</a></li>
                <li><a href="#">收藏的小店</a></li>
                <li><a href="#">浏览足记</a></li>

            </ul>
        </li>
        <li  style="position:absolute;left:1240px;top:10px;"><a href="javascript:void(0)">我的订单  |</a></li>
        <li  style="position:absolute;left:1310px;top:10px;">
        <img style="width:20px;height:20px;top:10px;"src="img2/11.jpg" alt=""/><a href="">
            购物车<a style="color:red;">1</a><a href="">件</a></a></li>


        <li class="drop-menu" >
            <a class="kehu"  href="javascript:void(0)" style="position:absolute;left:1400px;top:10px;">客户服务   |</a>
            <ul  class="drop-contentc" >

                <li><a href="#">消费者服务</a></li>
                <li><a href="#">商家服务</a></li>
                <li><a href="#">规则中心</a></li>

            </ul>
        </li>

        <li class="drop-menu">
        <img style="width:20px;height:20px;position:absolute;left:1480px;top:10px;"
             src="img2/12.jpg" alt=""/>
            <a  class="xiaodian" style="position:absolute;left:1500px;top:10px;"href="javascript:void(0)">我的小店  |</a>
            <ul  class="drop-contentd" >

                <li><a href="#">管理后台</a></li>
                <li><a href="#">商家社区</a></li>
                <li><a href="#">商家培训</a></li>
                <li><a href="#">市场入驻</a></li>

            </ul>
        </li>
            <div class="clear:both;"></div>
        </ul>
           </ul>
            <div class="clr"></div>





        </div>

        </div>





            <div>
                <a href="#"><img style="position:absolute;left:430px;top:20px;"src="img/103.png" alt=""/></a>
            </div>

            <div style="margin:0;padding:0; width:100%;height:1px;background-color:lightgray;
                      position:absolute;top:160px;"></div>



        </div>

    </div>

          <div class="one">
              <div class="one1">
                  <a href=""><img style="position:absolute;left:400px;top:100px;"src="img/2.png" alt="" /></a>
              </div>

              <div class="one2">
                  <a href=""><img style="position:absolute;left:1050px;top:100px;"src="img/1-6.png" alt="" /></a>
              </div>


          </div>

      <div class="con">
          <div class="f">
              <div class="f1">
                <button style="width:110px;height:30px;background-color:black;color:white;
                position:absolute;top:30px;border-radius:5px;left:50px;">全部商品（1）</button>
              </div>
              <ul>
                  <li style="position:absolute;left:200px;top:35px;"> | 优惠（0） </li>
                  <li style="position:absolute;left:300px;top:35px;">  | 库存紧张（0）</li>
              </ul>

              <div class="f2">
                  <div class="a">
                       <ul>
                          <li>操作</li>
                          <li>小计（元）</li>
                          <li>数量</li>
                          <li>单价(元)</li>
                          <li>商品信息</li>
                          <li>商品</li>
                          <li style="position:absolute;left:0px;"><input style="width:10px;height:10px;"type="check"/>全选</li>
                      </ul>
                      <div style="margin:0;padding:0; width:1050px;height:1px;background-color:lightgray;
                      position:absolute;left:100px;top:180px;"></div>


                  </div>
                  <div class="b">
                      <ul>
                          <li style="position:absolute;left:800px;top:200px;">满两件减2</li>
                          <li style="position:absolute;left:700px;top:200px;" >65元任选两件</li>
                          <li style="position:absolute;left:-20px;top:200px;">店铺：发际线少女</li>
                      </ul>

                    <p style="position:absolute;left:1050px;top:225px;color:red;">
                        优惠券:
                        <input style="width:40px;height:20px;"type="text" value="领取"/>
                    </p>
                      <div style="margin:0;padding:0; width:1050px;height:1px;background-color:lightgray;
                      position:absolute;left:100px;top:260px;"></div>



                  </div>
                  <div class="c">
                      <input style="width:30px;height:10px;background-color:lightgray;position:absolute;left:100px;top:320px; "type="text" value="失效"/>
                      <img class="box1" style="position:absolute;left:180px;top:280px;"src="img/1-7.jpg" alt=""/>
                      <p1  style="position:absolute;left:300px;top:280px;">珊瑚礁 薄荷绿小清新 N字鞋</p1>
                      <ul>
                          <li  style="position:absolute;left:500px;top:280px;">颜色：珊瑚礁薄荷绿色</li>
                          <li  style="position:absolute;left:500px;top:300px;">尺码：39</li>
                          <li  style="position:absolute;left:700px;top:280px;">200.00</li>
                          <li  style="position:absolute;left:1000px;top:280px;">1000.00</li>
                          <li  style="position:absolute;left:1100px;top:280px;">删除</li>
                      </ul>
                      <img  style="position:absolute;left:800px;top:280px;border:1px solid #ccc;"src="img/1-8.png" alt=""/>

                      <div style="margin:0;padding:0; width:1050px;height:1px;background-color:lightgray;
                      position:absolute;left:100px;top:400px;"></div>

                      <div style="margin:0;padding:0; width:1200px;height:1px;background-color:lightgray;
                      position:absolute;left:0px;top:420px;"></div>
                  </div>

                  <div class="d">
                     <ul>
                         <li style="position:absolute;left:100px;top:440px;"><input style="width:10px;height:10px;"type="check"/>全选</li>
                         <li  style="position:absolute;left:150px;top:440px;">删除</li>
                         <li  style="position:absolute;left:180px;top:440px;">清空失效商品</li>
                         <li  style="position:absolute;left:750px;top:450px;">共有0件商品，总计：</li>
                         <li  style="position:absolute;left:900px;top:440px;font-size:30px;color:red;"><b>￥0.00</b></li>

                     </ul>
                      <input style="width:200px;height:75px;position:absolute;left:1000px;top:420px;font-size:25px;
                      background-color:lightgray;"type="text" value="去付款 >"/>


                  </div>
                  <div class="e">
                      <p style="position:absolute;left:400px;top:550px;">蘑菇街 | 加入开放平台 © 2016 Mogujie.com,All Rights Reserved.</p>
                      <img style="position:absolute;left:330px;top:580px;"src="img/1-9.png" alt=""/>


                  </div>
                  </div>

              </div>

          </div>

      </div>

 </div>

</body>
</html>
<script>

    $(function(){
        $('.drop-contentb').css('display','none')
        $('.drop-contentc').css('display','none')
        $('.drop-contentd').css('display','none')
        $('.a').hover(function(){
            $('.drop-contentb').css('display','block')
        },function(){
            $('.drop-contentb').css('display','none')
        })

        $('.jiamiao123').hover(function(){
            $('.drop-contenta').css('display','block')
        },function(){
            $('.drop-contenta').css('display','none')
        })

        $('.kehu').hover(function(){
            $('.drop-contentc').css('display','block')
        },function(){
            $('.drop-contentc').css('display','none')
        })


        $('.xiaodian').hover(function(){
            $('.drop-contentd').css('display','block')
        },function(){
            $('.drop-contentd').css('display','none')
        })
    })















    var box1=document.querySelector('.box1');
    box1.addEventListener('mouseover',function(){
        console.log('鼠标移入了');
        box1.style.width="200px";
        box1.style.height="200px";
        box1.style.border="1px solid #ccc;"

    })
    box1.addEventListener('mouseout',function () {
        console.log('鼠标移出了');
        box1.style.width="100px";
        box1.style.height="100px";

    } )

</script>









